<template>
    <div>
        <el-dialog title="请输入您的详细地址信息" :visible.sync="visable">
            <el-container>
                <el-main>
                    <el-descriptions class="margin-top" title="" :column="1">
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-caret-right"></i>
                                电话号码
                            </template>
                            <el-input
                                size="mini"
                                placeholder="请输入内容"
                                suffix-icon="el-icon-date"
                                v-model="consumerInfo.teleNumber">
                            </el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-caret-right"></i>
                                所居住省
                            </template>
                            <el-input
                                size="mini"
                                placeholder="请输入内容"
                                suffix-icon="el-icon-date"
                                v-model="consumerInfo.address_province">
                            </el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-caret-right"></i>
                                所居住市
                            </template>
                            <el-input
                                size="mini"
                                placeholder="请输入内容"
                                suffix-icon="el-icon-date"
                                v-model="consumerInfo.address_city">
                            </el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-caret-right"></i>
                                所居住区/县
                            </template>
                            <el-input
                                size="mini"
                                placeholder="请输入内容"
                                suffix-icon="el-icon-date"
                                v-model="consumerInfo.address_county">
                            </el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-caret-right"></i>
                                快递点
                            </template>
                            <el-input
                                type="textarea"
                                :rows="2"
                                size="mini"
                                placeholder="请输入内容"
                                suffix-icon="el-icon-date"
                                v-model="consumerInfo.address_location">
                            </el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-caret-right"></i>
                                收件人
                            </template>
                            <el-input
                                type="textarea"
                                :rows="2"
                                size="mini"
                                placeholder="请输入内容"
                                suffix-icon="el-icon-date"
                                v-model="consumerInfo.consignee">
                            </el-input>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-main>
            </el-container>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visable = false">取 消</el-button>
                <el-button @click="countPrice">结算</el-button>
            </span>
        </el-dialog>
        <el-table
            :data="commodityList1"
            @row-click="handleRowClick"
            @cell-mouse-enter="handleCellMouseEnter"
            @selection-change="handleSelectionChange"
            style="width: 100%;height: 550px">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                label="商品图片"
                width="200">
                <template slot-scope="scope">
                    <img :src="scope.row.url" style="height: 80px">
                </template>
            </el-table-column>
            <!-- <el-table-column
                label="商品编号"
                prop="id"
                width="180">
            </el-table-column> -->
            <!-- <el-table-column
                label="商品名称"
                prop="name"
                width="150">
                <template slot-scope="scope">
                    <el-tooltip content="点击前往查看商品评论" placement="top">
                        <el-link type="primary" icon="el-icon-view" @click="gotoCommodityReview(scope.row)">{{scope.row.name}}</el-link>
                    </el-tooltip>
                </template>
            </el-table-column> -->
            <el-table-column
                label="商品价格"
                prop="price"
                width="200">
                <template slot-scope="scope">
                    <bk-animate-number :value="scope.row.price">$</bk-animate-number>
                </template>
            </el-table-column>
            <el-table-column
                label="购买数量"
                prop="price"
                width="300">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.number" label="描述文字" size="mini" @change="handleTrolleyNumberClick"></el-input-number>
                    <!-- <el-button icon="el-icon-minus" circle @click="handleMinusClick"></el-button>
                    <bk-animate-number :value="scope.row.price" style="width:10px"></bk-animate-number>
                    <el-button icon="el-icon-plus" circle @click="handlePlusClick"></el-button> -->
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.id > 0" type="danger" icon="el-icon-delete" size="small" @click="handleDeleteCommodityFromTrolley">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="success" icon="el-icon-wallet" size="small" @click="handleCountPriceClcick" style="margin-top:10px;">结算</el-button>
        <!-- <el-pagination
            background
            layout="prev, pager, next"
            :total="pagination.total"
            :page-size="pagination.pageSize"
            :current-page="pagination.pageNum"
            @current-change="handleCurrentChange"
            style="width:40%;margin-left:40%">
        </el-pagination> -->
    </div>
</template>
<script>
    export default {
        components: {
        },
        data () {
            return {
                config: {
                    theme: 'success',
                    message: ''
                },
                visable: false,
                consumerInfo: {
                    teleNumber: '',
                    address_province: '',
                    address_city: '',
                    address_county: '',
                    address_location: '',
                    consignee: ''
                },
                countList: [],
                commodityDetail: {
                    visable: false,
                    commodity: []
                },
                // pagination: {
                //     pageSize: 5,
                //     pageNum: 1,
                //     pages: 2,
                //     total: 10
                // },
                commodityList: [
                ],
                categoryList: [
                ],
                commodityList1: [],
                urlList: [],
                url: '',
                curId: ''
            }
        },
        computed: {
        },
        created () {
            this.getCategory()
            this.findCommodityInTrolley()
        },
        methods: {
            async countPrice () {
                const createOrderdata = {
                    'teleNumber': this.consumerInfo.teleNumber,
                    'address_province': this.consumerInfo.address_province,
                    'address_city': this.consumerInfo.address_city,
                    'address_county': this.consumerInfo.address_county,
                    'address_location': this.consumerInfo.address_location,
                    'consignee': this.consumerInfo.consignee
                }
                this.$http.post('/bill/createOrder', createOrderdata).then(res => {
                    const orderNumber = res.data.data
                    const data = {
                        'orderNumber': orderNumber,
                        'commodity_id': JSON.stringify(this.countList)
                    }
                    console.log('orderNumberAndCO')
                    console.log(data)
                    this.$http.post('shoppingTrolley/countPrice', data).then(res => {
                        console.log('countPrice')
                        console.log(res)
                        const data = {
                            'totalPrice': res.data.data.totalPrice,
                            'commodityData': JSON.stringify(res.data.data.orderOneByOne)
                        }
                        this.$http.post('bill/addCommodityToBill', data).then(res => {
                            console.log(res)
                            this.config.theme = 'success'
                            this.config.message = '结算成功'
                            this.$bkMessage(this.config)
                            this.visable = false
                            this.findCommodityInTrolley()
                        })
                    })
                })
            },
            async addToShoppingTrolley (number) {
                const data = {
                    'commodity_id': this.curId,
                    'number': number
                }
                this.$http.post('/shoppingTrolley/addCommodityInto', data).then(res => {
                    console.log(res)
                })
            },
            async getCategory () {
                this.$http.get('/findCommodityCategory').then(res => {
                    this.categoryList = res.data.data
                })
            },
            async deleteCommodity (id) {
                const data = {
                    'id': id
                }
                this.$http.delete('/admin/deleteCommodity', { data: data }).then(res => {
                    console.log(res)
                })
            },
            async findCommodityInTrolley () {
                this.commodityList1 = []
                this.$http.get('/shoppingTrolley/findCommodityInTrolley').then(res => {
                    console.log(res)
                    // this.pagination.total = res.data.data.total
                    // this.pagination.pageNum = res.data.data.pageNum
                    // this.pagination.pages = res.data.data.pages
                    this.commodityList = res.data.data
                    console.log(this.commodityList)
                    this.commodityList.forEach(element => {
                        this.getPicture(element)
                    })
                })
            },
            async getPicture (commodity) {
                this.$http.get('/image', { params: { 'imageName': commodity.picture_name }, responseType: 'blob' }).then(res => {
                    const blob = new Blob([res.data])
                    const url = window.URL.createObjectURL(blob)
                    this.url = url
                    this.$set(commodity, 'url', url)
                    this.commodityList1.push(commodity)
                })
            },
            handleDelete (index, row) {
                this.deleteCommodity(row.id)
            },
            handleEdit (index, row) {
                this.$router.push({ name: 'addCommodity', params: { alterData: row } })
            },
            handleCurrentChange (newPage) {
                this.pagination.pageNum = newPage
                this.getAllCommodity()
            },
            fingCategoryById (id) {
                let name = ''
                this.categoryList.forEach(element => {
                    if (id === element.id) {
                        name = element.category
                    }
                })
                return name
            },
            handleRowClick (row, column, event) {
                if (column.label !== '操作-消费者') {
                    this.consumerInfo = row
                    this.commodityDetail.visable = true
                }
            },
            gotoCommodityReview (row) {
                this.$router.push({ name: 'commodityReview', params: { commodity: row } })
            },
            handleMinusClick () {
                //
            },
            handlePlusClick () {
                //
            },
            handleTrolleyNumberClick (currentValue, oldValue) {
                this.addToShoppingTrolley(currentValue)
            },
            handleCellMouseEnter (row, column, cell, event) {
                this.curId = row.id
            },
            handleDeleteCommodityFromTrolley () {
                this.addToShoppingTrolley(0)
                this.findCommodityInTrolley()
            },
            handleSelectionChange (selection) {
                this.countList = []
                selection.forEach(element => {
                    this.countList.push(element.id)
                })
                console.log(this.countList)
            },
            handleSelectAll (selection) {
                //
            },
            handleCountPriceClcick () {
                this.visable = true
                console.log(this.consumerInfo.visable)
            },
            createOrder () {
                this.countPrice()
            }
        }
    }
</script>

<style scoped>
.select-collection {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
